<template>
  <main class="home-page">
    <!-- 轮播图 -->
    <HeroCarousel />

    <!-- 救助过程 -->
    <RescueProcess />

    <!-- 大图背景区域 -->
    <div class="page_bg" :style="`background: url(${require('@/assets/images/indb.jpg')}) center top no-repeat; height: 730px;`">
      <div class="shuzi">
        <div class="container"></div>
      </div>
    </div>

    <!-- 领养案例 -->
    <AdoptionCases />

    <!-- 关于我们选项卡 -->
    <AboutSection />

    <!-- 救助案例 -->
    <ServiceCases />

    <!-- 宠物栏目 -->
    <PetKnowledge />
  </main>
</template>

<script>
import HeroCarousel from '@/components/home/HeroCarousel.vue'
import RescueProcess from '@/components/home/RescueProcess.vue'
import AdoptionCases from '@/components/home/AdoptionCases.vue'
import AboutSection from '@/components/home/AboutSection.vue'
import ServiceCases from '@/components/home/ServiceCases.vue'
import PetKnowledge from '@/components/home/PetKnowledge.vue'

export default {
  name: 'HomeIndex',
  components: {
    HeroCarousel,
    RescueProcess,
    AdoptionCases,
    AboutSection,
    ServiceCases,
    PetKnowledge
  },
  mounted() {
    // 设置页面标题
    document.title = '流浪动物之家 - 宠物救助与领养平台'
  }
}
</script>

<style scoped>
.page_bg {
  position: relative;
  background-size: cover !important;
  background-attachment: fixed;
  background-position: center !important;
  min-height: 730px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .page_bg {
    height: 400px;
    min-height: 400px;
    background-attachment: scroll;
  }
}
</style>
